<template>
  <el-dialog
    id="printDialog"
    :append-to-body="false"
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible.sync="dialog"
    title="订单打印"
    width="50%"
  >
    <el-tabs v-model="activeName" style="padding-left: 8px;" @tab-click="tabClick">
      <el-tab-pane label="市场价" name="0">
        <el-button
          v-print="printObj"
          type="warning"
          class="filter-item"
          size="mini"
          icon="el-icon-printer"
        >打印
        </el-button>
        <div id="printTest">
          <div v-for="(item, index) in printList" class="order-list">
            <el-header class="order-title">订货单</el-header>
            <div class="order-info">
              <span class="info">订单编号 :{{ item.orderSn }}</span>
              <span class="info">用户呢称 : {{ item.nickName }}</span>
              <span class="info">下单日期 : {{ item.createTime }}</span>
            </div>
            <div class="order-info">
              <span class="info">收货人 : {{ item.receiverName }}</span>
              <span class="info">联系电话 : {{ item.receiverPhone }}</span>
              <span>收货地址 :{{ item.receiverProvince }}&nbsp;{{ item.receiverCity }}&nbsp;{{
                item.receiverRegion
              }}&nbsp;{{ item.receiverDetailAddress }}</span>
            </div>
            <div>
              <el-table
                border
                show-summary
                :data="item.itemList"
                :summary-method="getSummaries"
                size="small"
                style="width: 100%;"
              >
                <el-table-column type="index" label="行号" :index="indexMethod" width="50" />

                <el-table-column align="center" label="商品编号">
                  <template slot-scope="scope">
                    <span>No.{{ scope.row.productId }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="商品名称">
                  <template slot-scope="scope">
                    <span>{{ scope.row.productName }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="单价">
                  <template slot-scope="scope">
                    <span>￥ {{ scope.row.originalPrice }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="数量">
                  <template slot-scope="scope">
                    <span>x{{ scope.row.num }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="cartInfoMap" align="center" label="小计(元)">
                  <template slot-scope="scope">
                    <span>{{ scope.row.originalPrice * scope.row.num }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="cartInfoMap.mark" align="center" label="备注" />
              </el-table>
            </div>
            <div class="order-info">
              <span class="info">打印时间 :{{ parseTime() }}</span>
            </div>
            <div style="page-break-after: always;" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="批发价" name="1">
        <el-button
          v-print="printObj"
          type="warning"
          class="filter-item"
          size="mini"
          icon="el-icon-printer"
        >打印
        </el-button>
        <div id="printTest">
          <div v-for="(item, index) in printList" class="order-list">
            <el-header class="order-title">订货单</el-header>
            <div class="order-info">
              <span class="info">订单编号 :{{ item.orderSn }}</span>
              <span class="info">用户呢称 : {{ item.nickName }}</span>
              <span class="info">下单日期 : {{ item.createTime }}</span>
            </div>
            <div class="order-info">
              <span class="info">收货人 : {{ item.receiverName }}</span>
              <span class="info">联系电话 : {{ item.receiverPhone }}</span>
              <span>收货地址 :{{ item.receiverProvince }}&nbsp;{{ item.receiverCity }}&nbsp;{{
                item.receiverRegion
              }}&nbsp;{{ item.receiverDetailAddress }}</span>
            </div>
            <div>
              <el-table
                border
                show-summary
                :data="item.itemList"
                :summary-method="getSummaries"
                size="small"
                style="width: 100%;"
              >
                <el-table-column type="index" label="行号" :index="indexMethod" width="50" />

                <el-table-column align="center" label="商品编号">
                  <template slot-scope="scope">
                    <span>No.{{ scope.row.productId }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="商品名称">
                  <template slot-scope="scope">
                    <span>{{ scope.row.productName }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="单价">
                  <template slot-scope="scope">
                    <span>￥ {{ scope.row.price }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="数量">
                  <template slot-scope="scope">
                    <span>x{{ scope.row.num }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="cartInfoMap" align="center" label="小计(元)">
                  <template slot-scope="scope">
                    <span>{{ scope.row.price * scope.row.num }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="cartInfoMap.mark" align="center" label="备注" />
              </el-table>
            </div>
            <div class="order-info">
              <span class="info">打印时间 : &nbsp;&nbsp;{{ formatTime() }}</span>
              <span class="info">配送方式 : &nbsp;&nbsp;{{ item.deliveryCompany }}</span>
            </div>
            <div style="page-break-after: always;" />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
    </span>
  </el-dialog>

</template>

<script>

import { parseTime } from '@/utils'

export default {
  props: {
    printList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeName: '0',
      loading: false, dialog: false,
      nowDate: '',
      printObj: {
        id: 'printTest',
        popTitle: '悦舒美',
        // preview: true,
        // previewTitle: '悦舒美', // The title of the preview window. The default is 打印预览
        // previewBeforeOpenCallback(vue) {
        //   console.log('正在加载预览窗口')
        // },
        // previewOpenCallback(vue) {
        //   console.log('已经加载完预览窗口')
        // },
        beforeOpenCallback(vue) {
          console.log('打开之前')
        },
        openCallback(vue) {
          console.log('执行了打印', vue)
        },
        closeCallback(vue) {
          console.log('关闭了打印工具')
        }
      }
    }
  },
  mounted() {

  },
  methods: {
    tabClick(val) { },
    formatTime() {
      const nowDate = new Date()
      return parseTime(nowDate, 'yyyy/MM/dd')
    },
    cancel() {
      this.dialog = false
      this.$parent.refresh()
    },
    indexMethod(index) {
      return index + 1
    },
    getSummaries(param) {
      const { columns, data } = param
      console.log(columns)
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 5) {
          let values = 0
          if (this.activeName === '0') {
            values = data.map(item => Number(item.originalPrice * item.num))
          } else {
            values = data.map(item => Number(item.price * item.num))
          }
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ''
        }
      })
      return sums
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  height: calc(100% - 80px);
  position: absolute;
  overflow: auto;
  width: calc(100% - 20px);

  .order-caculate {
    font-size: 14px;
    color: #909399;
    border-top: 1px solid #f0f0f0;
    padding: 20px 10px;

    .caculate-title {
      display: inline-block;
      margin-right: 50px;
    }

    .caculate-num {
      font-size: 20px;
      color: #ff4949;
    }
  }

  .el-table th {
    background-color: #fafafa;
  }
}

.footer-contains {
  position: absolute;
  display: -ms-flexbox;
  display: flex;
  background-color: #f6f6f6;
  bottom: 0;
  flex-align: center;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 999;
  padding: 0 20px 0 13px;
}

/*打印单样式编辑*/
.order-list {
  /*  height: 297mm;*/
  margin: 0 auto;
  width: 210mm;

  .order-title {
    height: 16mm;
    line-height: 16mm;
    font-size: 7mm;
    font-weight: bolder;
    text-align: center;
  }

  .order-info {
    span {
      display: inline-block;
      padding: 0 0 10px 0;
      font-size: 3mm;
    }

    span.info {
      width: 70mm;
    }
  }

  .el-table--small th, .el-table--small td {
    padding: 4px 0;
  }
}
</style>
